<template>
  <div>
    <div class="item" v-for="(v) in list" :key="v.id">
      <div class="left">
        <img :src="v.image" alt="" v-lazy width="100" height="100"/>
      </div>
      <div class="right">
        <h3>{{ v.title }}</h3>
        <div class="desc">
          <span>月售{{ v.sell }}+</span>
          <span>起送¥0</span>
          <span>{{ v.transportationPrice === 0 ? '全免运费' : '基础运费¥' + v.transportationPrice }}</span>
        </div>
        <div class="vip">
          Vip每个月可以领取89元优惠卷
        </div>
        <div class="child-items">
          <div v-for="(v) in v.items" :key="v.id" class="child-item">
            <img :src="v.image" alt=""/>
            <div class="title">{{ v.title }}</div>
            <p>{{ v.price }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import axios from 'axios';
import { ref } from 'vue';
// import { Image } from 'vant'

const list = ref([]);
const getList = async () => {
  const resp = await axios.get('/list')
  list.value = resp.data
}

getList()

</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.item {
  display: flex;
  // width: 100%;
  .left {
    img {
      border-radius: 50%;
    }
  }

  .right {
    flex: 1;
    margin-left: 6px;
    overflow: hidden;
    .desc {
      display: flex;
      justify-content: space-between;
    }

    .vip {
      color: red;
      font-weight: bold;
    }

    .child-items {
      display: flex;

      .child-item {
        width: 33.3%;
        flex: 1;
        .title {
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }

        img {
          width: 100%;
          padding: 2px;
        }

        p {
          color: red;
        }
      }
    }
  }
}</style>